<template>
  <!--  -->
  <div class="right-panel" :class="{ 'hidden-right': ishidden }">
    <div class="fold-icon" @click="closeRightBox">
      <el-icon>
        <DArrowRight :class="{ 'hidden-icon': ishidden }" />
      </el-icon>
    </div>
    <div class="full-box">
      <div class="title-box">
        <div class="title-name">
          预报断面-
          <label class="font-color-blue">{{ props.defaultselect.title }}</label>
        </div>
        <!-- <span class="close-box" @click="goBack">X</span> -->
      </div>
      <div class="except-title">
        <!-- 查询条件 -->
        <div class="search-box">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="方案名称">
              <el-input
                style="width: 130px"
                v-model="formInline.scName"
                placeholder="请输入方案名称"
              />
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                class="time-daterange"
                v-model="formInline.times"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-form>
          <div>
            <el-button type="primary" @click="handleSearch">查看</el-button>
            <el-button type="primary" @click="handleAdd">新增方案</el-button>
          </div>
        </div>

        <div class="top-table-box">
          <el-table
            :data="state.tabNewData"
            style="width: 100%"
            height="100%"
            border
            @current-change="handleChangescheme"
          >
            <el-table-column width="40" align="center">
              <template #default="scope">
                <el-radio v-model="schemeRadio" :label="scope.row.scid">
                  <i />
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="scName" label="方案名称" align="center" show-overflow-tooltip />
            <el-table-column prop="creator" label="创建人" align="center" />
            <el-table-column
              prop="createTime"
              align="center"
              label="创建时间"
              show-overflow-tooltip
            />
            <el-table-column prop="ccNum" label="总场次" align="center" />
            <!-- <el-table-column prop="accLevel" label="精准度间等级" align="center" width="180" /> -->
            <!-- <el-table-column prop="timeliness" label="时效性等级" align="center" /> -->
            <el-table-column label="操作" fixed="right" width="120" align="center">
              <template #default="{ row }">
                <!-- <el-button link type="primary" size="small" @click="handleClick">修改</el-button> -->
                <el-button link type="danger" size="small" @click="handleDeletePlan(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- <pagi-nation :pageSize="page.pageSize" :pageTotal="page.total" @pageFunc="pageFunc">
          </pagi-nation>-->
        </div>
        <el-divider class="divider-line" />
        <div class="detaile-title">
          方案详情-
          <label class="font-color-blue">{{ schemeName }}</label>
        </div>
        <!-- <div class="tab-box">
          <div
            class="tab-item"
            :class="{ 'tab-active': tab.id == activeTab }"
            v-for="(tab, index) in tabList"
            :key="index"
            @click="changeTab(tab)"
          >
            {{ tab.name }}
          </div>
        </div>-->
        <div class="tabs-box">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="基础信息" name="first">
              <div class="tab-container">
                <!-- 不是12D水动力时显示的基础信息 -->
                <template
                  v-if="!['优化调度', '规程调度', '联合调度'].includes(props.modelobj.typeName)"
                >
                  <div class="basic-row">
                    <div class="label-row">
                      <label for>方案名称：</label>
                      <span class="label-value">{{ schemeName }}</span>
                    </div>
                    <div class="label-row" v-if="[12, 22].includes(props.modelobj.modelId)">
                      <label for>模型名称：</label>
                      <span class="label-value">{{ modelName }}</span>
                    </div>
                    <div class="label-row">
                      <label for>模型参数：</label>
                      <!-- <span class="label-value">{{ modelParams }}</span>
                      <span class="link-tag">查看</span> -->
                      <el-select
                        v-model="modelParams"
                        placeholder="模型参数"
                        @change="handleModelparmas"
                      >
                        <el-option
                          :label="item.scName"
                          :value="item.id"
                          v-for="item in paramsOptions"
                          :key="item.id"
                        />
                      </el-select>
                      <span class="link-tag" @click="lookConfig">查看参数详情</span>
                    </div>
                  </div>
                  <div class="label-row label-row-title">
                    <label for>洪水场次：</label>
                  </div>
                  <div class="basic-table">
                    <el-table border height="100%" :data="state.ccInfo" style="width: 100%">
                      <el-table-column
                        prop="ccCode"
                        label="场次编号"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column
                        prop="ccName"
                        label="场次名称"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column align="center" label="预报时间" show-overflow-tooltip>
                        <template #default="scope">
                          <span>{{ dateFormat(scope.row.fcTime) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="开始时间" show-overflow-tooltip>
                        <template #default="scope">
                          <span>{{ dateFormat(scope.row.startTime) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column align="center" label="结束时间" show-overflow-tooltip>
                        <template #default="scope">
                          <span>{{ dateFormat(scope.row.endTime) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="yrPerd"
                        label="预热期"
                        align="center"
                        show-overflow-tooltip
                      />
                      <el-table-column
                        prop="yjPerd"
                        label="预见期"
                        align="center"
                        show-overflow-tooltip
                      />
                    </el-table>
                  </div>
                  <!-- <div class="page">
                    <el-pagination
                      v-model:current-page="currentPage"
                      :page-size="10"
                      background
                      layout="total, prev, pager, next"
                      :total="100"
                    />
                  </div>-->
                </template>
                <template v-else>
                  <div class="basic-row">
                    <div class="label-row">
                      <label for>方案名称：</label>
                      <span class="label-value">{{ schemeName }}</span>
                    </div>
                    <div class="label-row">
                      <label for>模型参数：</label>
                      <!-- <div>
                        <el-select v-model="riverWay" class="m-2" placeholder="请选择演进河道">
                          <el-option
                            v-for="item in riverWayOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>-->
                      <span class="label-value">221001参数</span>
                      <span class="link-tag">查看参数详情</span>
                    </div>
                  </div>
                  <div class="label-row">
                    <label for>洪水场次：</label>
                  </div>
                  <div class="basic-table table-flex-row">
                    <div class="half-table-left">
                      <el-table
                        border
                        size="small"
                        height="100%"
                        :data="basicTableData"
                        style="width: 100%"
                      >
                        <el-table-column prop="name" label="场次名称" align="center" />
                        <el-table-column
                          prop="timelevel"
                          label="计算开始/结束时间"
                          align="center"
                        />
                        <el-table-column prop="timelevel" label="防洪高水位" align="center" />
                        <el-table-column
                          prop="timelevel"
                          label="下游保护断面最大流量"
                          align="center"
                        />
                        <el-table-column label="区间来水" align="center" width="100">
                          <template #default>
                            <el-button link type="primary" size="small" @click="handleClick"
                              >查看</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <!-- <div class="half-table-right">
                      <el-table
                        border
                        size="small"
                        height="100%"
                        :data="riverwayList"
                        style="width: 100%"
                      >
                        <el-table-column prop="name" label="演进河道" align="center" />
                        <el-table-column label="区间来水" align="center" width="100">
                          <template #default>
                            <el-button link type="primary" size="small" @click="handleClick"
                              >查看</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>-->
                  </div>
                </template>
              </div>
            </el-tab-pane>
            <el-tab-pane label="场次验证信息" name="second" :lazy="true">
              <!-- 选项卡容器-场次验证记录 -->
              <div class="tab-container">
                <ComputeResult
                  v-if="!['规程调度', '联合调度', '优化调度'].includes(props.modelobj.typeName)"
                  :showEcharts="true"
                  :showTabs="false"
                  :ccInfo="state.ccInfo"
                  :scid="scid"
                  :tabsId="tabsId"
                  :blkcd="props.defaultselect.blkcd"
                  :modelObj="props.modelobj"
                  @resetCcInfo="getCcList"
                  @sendAmplify="sendAmplify"
                  @computeFeature="computeFeature"
                />
                <!-- 水库调度的场次验证信息 -->
                <ComputeRules
                  v-else
                  :showTabs="false"
                  :ccInfo="state.ccInfo"
                  :tabsId="tabsId"
                  :modelObj="props.modelobj"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="综合评定结果" name="third">
              <!-- 选项卡容器-综合评定结果 -->
              <div class="tab-container">
                <EvaluateResult
                  :showTabs="false"
                  :tabsId="tabsId"
                  :scid="scid"
                  :modelObj="props.modelobj"
                  :blkcd="props.defaultselect.blkcd"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 新建功能容器 -->
    <div class="addNewData-panel" v-if="shwoAddPanel">
      <component
        :is="createPanelname"
        :modelobj="props.modelobj"
        :fanganInfo="selceFa"
        :ccInfo="state.ccInfo"
        :defaultselect="props.defaultselect"
      ></component>
    </div>
    <!-- 新增方案 -->
    <SchemeModel
      ref="schemeModelRef"
      :modelObj="props.modelobj"
      :defaultselect="props.defaultselect"
      @refresh="handleSearch"
    />
    <!-- 放大弹框 -->
    <el-dialog
      class="el-dialog-box"
      title="场次验证信息"
      v-model="provingItem"
      width="90%"
      :before-close="closeProVingItem"
      @opened="openDiag"
    >
      <ComputeResult
        :showTabs="false"
        :ccInfo="state.ccInfo"
        :scid="scid"
        :tabsId="tabsId"
        :blkcd="props.defaultselect.blkcd"
        :modelObj="props.modelobj"
        @resetCcInfo="getCcList"
        @computeFeature="computeFeature"
      />
    </el-dialog>
    <mulTable ref="mulTableRef" />
    <paramsSkby ref="paramsSkbyRef" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, markRaw, nextTick } from 'vue'
import emitter from '@/utils/bus'
import pagiNation from '@/components/app-pagination/pagination.vue'
import ComputeResult from '@/components/app-publicui/compute-result.vue'
// 时空变源综合评定结果
import EvaluateResult from '@/components/app-publicui/evaluate-result.vue'
import xaj_verify_info from '@/assets/data/com_data/xaj_verify_info.json'
//新增方案弹框
import SchemeModel from './cpns/schemeModel/index.vue'
// 特征值弹框
import mulTable from './cpns/mulTable/index.vue'
// 查看参数详情
import paramsSkby from '@/components/app-publicui/params-skby.vue'
//水文---新安江
// import createHydrology from './cpns/createHydrology.vue'
//水文---时空变原
// import createSkbyHydrology from './cpns/createSkbyHydrology.vue'
//水库--优化调度
// import createOptimal from './cpns/createOptimal.vue'
//水库--规程调度
// import createRegulation from './cpns/createRegulation.vue'
//1/2D水动力
// import createWaterpower from './cpns/createWaterpower.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
//接入接口
import {
  getSkbyList,
  getSkbyCcList,
  // 删除时空变源方案
  deleteSkbyPlan
} from '@/services/modules/model-verify'
import {
  getSkbyParamSchemes,
  getSkbyParams,
  getXajParamsDetail
} from '@/services/modules/model-config.js'

const props = defineProps({
  modelobj: {
    type: Object,
    default: () => {}
  },
  defaultselect: {
    type: Object,
    default: () => {}
  },
  ishidden: {
    type: Boolean,
    default: true
  }
})
//
const paramsSkbyRef = ref(null)
const mulTableRef = ref(null)
const paramsOptions = ref([])
const scid = ref(0)
const activeName = ref('first')
const schemeName = ref('--')
const modelName = ref('--')
const modelParams = ref('--')
const schemeModelRef = ref(null)
const tabsId = ref(null)
//tabs new数据
const state = reactive({
  tabNewData: [],
  ccInfo: [],
  secBlkcd: ''
})
//演进河道数据-1/2D水动力
const riverWay = ref('1')
//
const selceFa = ref({})
const schemeRadio = ref(0)
const riverWayOption = ref([
  {
    label: '杨家横水库-----盘龙',
    value: '1'
  },
  {
    label: '乔店水库-----盘龙',
    value: '2'
  }
])
//搜索条件
let formInline = ref({
  scName: '',
  times: ''
})
//下方表格数据
let basicTableData = reactive([
  {
    name: '20211019-20211030 ',
    time: '2022-10-19 10：00',
    number: '7',
    level: '12',
    timelevel: '2021-10-16 12:00    2021-10-21 12:00'
  },
  {
    name: '20211019-20211030 ',
    time: '2022-10-19 10：00',
    number: '7',
    level: '12',
    timelevel: '2021-10-16 12:00    2021-10-21 12:00'
  },
  {
    name: '20211019-20211030 ',
    time: '2022-10-19 10：00',
    number: '7',
    level: '12',
    timelevel: '2021-10-16 12:00    2021-10-21 12:00'
  }
])
//演进河道-表格数据
// let riverwayList = reactive([
//   {
//     name: '乔店水库  -----   盘龙',
//     id: '12'
//   },
//   {
//     name: '杨家横水库  ----- 盘龙',
//     id: '12'
//   }
// ])
// 打开计算特征值弹框
const computeFeature = (item) => {
  mulTableRef.value.handleOpenModal(item)
}
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 3, //每页条目数
  total: 3 // 记录总数
})
//选项卡部分
let activeTab = ref('1')
const tabList = ref([
  {
    id: '1',
    name: '基础信息'
  },
  {
    id: '2',
    name: '场次验证记录'
  },
  {
    id: '3',
    name: '综合评定结果'
  }
])

let createPanelname = ref('')
//控制新建面板显隐
const shwoAddPanel = ref(false)
// 查看参数详情 打开弹框
const lookConfig = () => {
  // 将blkcd和参数方案传入子组件
  paramsSkbyRef.value.handleOpenParams(modelParams.value, props.defaultselect.blkcd)
  // getXajParamsDetail({
  //   scid: modelParams.value
  // }).then((res) => {
  //   if (res.code === 200) {
  //     paramsDetail.value = res.data
  //     if (res.data) {
  //       showDialog.value = true
  //       state.disableForm = true
  //     }
  //   }
  // })
}

function handleChangescheme(item) {
  console.log(item, '999999')
  if (item) {
    selceFa.value = item
    schemeRadio.value = item
    schemeName.value = item.scName
    modelName.value = item.modelName
    modelParams.value = item.modelParamsScheme
    scid.value = item.scid
    getCcList()
  }
}
let provingItem = ref(false)
// 打开弹框放大
const sendAmplify = () => {
  provingItem.value = true
  // 重新渲染echarts
}
const openDiag = () => {
  nextTick(() => {
    emitter.emit('initEcharts')
  })
}
// 关闭放大弹框的回调
const closeProVingItem = () => {
  provingItem.value = false
  // 重新渲染echarts
  // showEcarts.value = false
}
// 删除验证方案
function handleDeletePlan(row) {
  ElMessageBox.confirm('确认删除此方案?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 删除时空变源验证方案
      deleteSkbyPlan({ id: row.scid }).then((res) => {
        if (res.code == 200) {
          ElMessage.success('删除成功')
          // 删除后重新加载方案列表
          handleSearch()
        }
      })
    })
    .catch(() => {})
}
function clearInfo() {
  schemeRadio.value = 'null'
  schemeName.value = '--'
  modelName.value = '--'
  modelParams.value = '--'
  state.ccInfo = []
}

onMounted(() => {
  console.log(props.modelobj.typeId, '检查')
  props.modelobj.modelId
  if ([1].includes(props.modelobj.typeId)) {
    //时空变源
    // createPanelname.value = markRaw(createSkbyHydrology)
  } else if ([2].includes(props.modelobj.typeId)) {
    //新安江
    // createPanelname.value = markRaw(createHydrology)
  } else if ([4].includes(props.modelobj.typeId)) {
    //优化调度
    // createPanelname.value = markRaw(createOptimal)
  } else if ([3].includes(props.modelobj.typeId)) {
    //规程调度
    // createPanelname.value = markRaw(createRegulation)
  } else if ([9].includes(props.modelobj.typeId)) {
    //联合调度
    // createPanelname.value = markRaw(createOptimal)
  } else if ([5, 6].includes(props.modelobj.typeId)) {
    //1/2D水动力
    // createPanelname.value = markRaw(createWaterpower)
  }
})

//折叠右侧面板
const closeRightBox = () => {
  let flg = true
  if (props.ishidden) {
    flg = false
  } else {
    flg = true
  }
  emitter.emit('changeRightPanel', flg)
}
//选项卡切换
const changeTab = (e) => {
  activeTab.value = e.id
}
function handleClick() {}
//返回模型管理主页面
const goBack = () => {
  emitter.emit('goback', true)
}
// const closeRefresh = () => {
//   handleSearch()
// }
//查询
const handleSearch = () => {
  getSkbyList({
    blkcd: state.secBlkcd,
    scName: formInline.value.scName,
    // mid: 1,
    mid: props.modelobj.id,
    startTime: timeSwitch(formInline.value.times == null ? 0 : formInline.value.times[0]),
    endTime: timeSwitch(formInline.value.times == null ? 0 : formInline.value.times[1])
  }).then((res) => {
    if (res.code === 200) {
      state.tabNewData = res.data
      if (res.data.length > 0) {
        schemeName.value = res.data[0].scName
        scid.value = res.data[0].scid
        schemeRadio.value = res.data[0].scid
        selceFa.value = res.data[0]
        getCcList()
      }
    }
  })
}
// 时间格式转换
const timeSwitch = (val) => {
  if (val) {
    let time = new Date(val)
    return (
      time.getFullYear() +
      '-' +
      (time.getMonth() + 1) +
      '-' +
      time.getDate() +
      ' ' +
      time.getHours() +
      ':' +
      time.getMinutes() +
      ':' +
      time.getSeconds()
    )
  } else {
    return undefined
  }
}
//添加
const handleAdd = () => {
  schemeModelRef.value.handleOpenModal(props.defaultselect)
  // shwoAddPanel.value = true
}
emitter.on('closeCreatePanel', (value) => {
  handleSearch()
  shwoAddPanel.value = value
})
//分页触发
const pageFunc = (data) => {
  page.pageSize = data.pageSize
  page.pageNum = data.pageNum
  loadTableData()
}
// 选择参数
function handleModelparmas(val) {
  modelParams.value = val
}
// 查看模型参数
function paramSchemes(blkcd) {
  getSkbyParamSchemes({
    blkcd: blkcd
    // mid: 2 //todo
    // mid: props.modelobj.id //todo
  }).then((res) => {
    if (res.code === 200) {
      paramsOptions.value = res.data
      if (paramsOptions.value.length > 0) {
        // 默认选中一个
        handleModelparmas(paramsOptions.value[0])
      }
      // paramsId.value = res.data[0].id
      // handleClickUnit(0)
    }
  })
}
//加载头部表格数据
const loadTabsData = (item) => {
  tabsId.value = item.id
  state.secBlkcd = item.blkcd
  // 获取参数下拉框数据
  paramSchemes(item.blkcd)
  clearInfo()
  // let _params = formInline.value
  getSkbyList({
    blkcd: state.secBlkcd,
    scName: formInline.value.scName,
    // mid: '',
    mid: props.modelobj.id,
    startTime: undefined,
    endTime: undefined
  }).then((res) => {
    if (res.code === 200) {
      state.tabNewData = res.data
      if (res.data.length > 0) {
        schemeName.value = res.data[0].scName
        scid.value = res.data[0].scid
        schemeRadio.value = res.data[0].scid
        selceFa.value = res.data[0]
        getCcList()
      }
    }
  })
  // state.tabNewData = xaj_verify_info.filter((e) => {
  //   return item.id === e.blkcd
  // })
  // if (state.tabNewData.length > 0 && state.tabNewData[0]?.verifySchemes)
  //   handleChangescheme(state.tabNewData[0]?.verifySchemes[0])
}
function getCcList() {
  getSkbyCcList({
    // scid: 7 //TODO
    scid: scid.value
  }).then((res) => {
    if (res.code === 200) {
      console.log(res.data, '新出发')
      state.ccInfo = res.data
    }
  })
}
function dateFormat(str) {
  var date = new Date(new Date(str).getTime())
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  var h = ' ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return Y + M + D + h + m + s
}

defineExpose({ loadTabsData })
</script>
<style lang="less" scoped>
.right-panel {
  padding-left: 20px;
  box-sizing: border-box;
  width: 1000px !important;
  .title-box {
    font-size: var(--header-fontsize);
    font-weight: normal;
    // height: 50px;
    margin-top: 10px;
  }
  :deep(.el-dialog-box) {
    height: 90vh;
    margin-top: 5vh !important;
    .el-dialog__body {
      height: calc(100% - 100px);
    }
  }
}
.hidden-right {
  right: -1000px !important;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.top-table-box {
  height: 130px;
  background: white;
}
.divider-line {
  margin: 10px 0;
}
.detaile-title {
  display: flex;
  align-items: center;
  height: 40px;
  // font-weight: bold;
  // color: var(--fold-word-color);
  font-size: var(--header-fontsize);
}
:deep(.el-radio) {
  height: auto;
}
.tabs-box {
  height: calc(100% - 260px);
  box-sizing: border-box;
  :deep(.el-tabs) {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 55px);
      .el-tab-pane {
        height: 100%;
      }
    }
  }
}

.tab-container {
  height: 100%;
  width: 100%;
  padding: 0px 0px 10px;
  box-sizing: border-box;
  overflow: auto;
}
.basic-table {
  height: calc(100% - 220px);
}
.page {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.basic-row {
  padding-left: 10px;
  box-sizing: border-box;
}
.label-row {
  height: 30px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  color: #797979;
  .label-value {
    margin-left: 30px;
    color: #333333;
  }
  .link-tag {
    color: #0054db;
    text-decoration: underline;
    margin-left: 100px;
    cursor: pointer;
  }
}
.label-row-title {
  color: #409eff;
}
.table-flex-row {
  // display: flex;
  // justify-content: space-between;
  height: calc(100% - 135px);
}
.half-table-left {
  height: 100%;
  // width: 56%;
}
// .half-table-right {
//   height: 100%;
//   width: 40%;
// }
.addNewData-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  border-radius: 10px 0px 0px 10px;
  z-index: 200;
  overflow: hidden;
}
</style>
